<template>
	<view class="container">
		<z-paging ref="paging" use-page-scroll :default-page-size="pageSize" v-model="merchantList"
			@query="getMerchantListData">
			<template #top>
				<tui-navigation-bar :titleSize="18" :titleLineHeight="18" :titlefontWeight="800" :isOpacity="false"
					:isFixed="false" :splitLine="true" @init="initNavigation" title="更多商家" backgroundColor="#fff"
					color="#000">
					<view class="tui-header-icon" :style="{ marginTop: top + 'px' }">
						<tui-icon name="arrowleft" color="#333" @click="back"></tui-icon>
					</view>
				</tui-navigation-bar>
			</template>
			
			<!-- 推荐商家 -->
			<tui-list-view color="#777">
				<tui-list-cell arrowRight="0" padding="26rpx 0rpx" backgroundColor="#f5f5f5" lineColor="#f5f5f5">
					<view class="thorui-flex__between">
						<tui-text block text="推荐商家" size="36" fontWeight="600" padding="0rpx"></tui-text>
					</view>
				</tui-list-cell>
			</tui-list-view>
			<!-- 分类 -->
			<tutor-store-short :ossUrl="ossUrl" :tabs="tabs" @change="changeTabs"></tutor-store-short>
			<!-- 商家列表 -->
			<view :style="merchantList.length ? 'margin-top: 40rpx;' :''">
				<tui-waterfall :listData="merchantList">
					<template v-slot:left="{ list }">
						<MerchantItem :ossUrl="ossUrl" @clickDetail="toShopDetails" v-for="(entity,index) in list" :key="index" :entity="entity"></MerchantItem>
					</template>
					<template v-slot:right="{ list }">
						<MerchantItem :ossUrl="ossUrl" @clickDetail="toShopDetails" v-for="(entity,index) in list" :key="index" :entity="entity"></MerchantItem>
					</template>
				</tui-waterfall>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import MerchantItem from '../../compontents/merchantItem.vue'
	import {
		getMerchantList
	} from "@/http/api/index/index.js"
	import Cache from '@/utils/cache'
	import ZPMixin from '@/uni_modules/z-paging/components/z-paging/js/z-paging-mixin'
	export default {
		mixins: [ZPMixin],
		data() {
			return {
				ossUrl: getApp().globalData.ossurl,//图片前缀
				// 导航栏
				top: 0, //标题图标距离顶部距离
				marginTop: 0, // 页面内容距离顶部的距离

				// 分类数据列表
				selCategoryId: '',
				tabs: [],

				// 商家列表
				merchantList: [],
				atciveIndex: 0,
				pageSize: 6
			}
		},
		components: {
			MerchantItem
		},
		onLoad() {
			// 分类数据
			this.tabs = uni.getStorageSync("categoryList") || [];
			this.selCategoryId = this.tabs[0].id;
		},
		methods: {
			// 导航栏
			initNavigation(e) {
				this.top = e.top;
				this.marginTop = e.height + e.top;

			},
			back() {
				uni.navigateBack();
			},
			//进入商家详情
			toShopDetails(e) {
				uni.navigateTo({
					url: '/pages/index/modules/shopDetails/shopDetails?id='+e.id
				})
			},
			// 类型切换tab
			changeTabs(e) {
				this.selCategoryId = e.categoryId;
				this.$refs.paging.reload();
			},
			// 商家列表分页
			getMerchantListData(pageNo, pageSize) {
				const params = {
					pageNum: pageNo,
					pageSize: pageSize,
					categoryId: this.selCategoryId,
					longitude: Cache.get("longitude"),
					latitude: Cache.get("latitude")
				}
				getMerchantList(params).then(res => {
					if (res.code == 200) {
						this.$refs.paging.complete(res.rows);
					} else {
						this.$utils.toast(res.msg)
					}
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5 !important;
	}

	.container {
		width: 94%;
		height: 100vh;
		margin: 0px auto;
		padding-bottom: 40rpx;
	}

	.tui-header-icon {
		width: 97%;
		position: fixed;
		top: 0;
		padding: 0 0 0 3%;
		display: flex;
		align-items: center;
		height: 32px;
		transform: translateZ(0);
		box-sizing: border-box;
	}

	/* 商家列表 */
	.tui-product__pay image {
		width: 32rpx;
		height: 32rpx;
		margin-right: 8rpx;
	}

	.tui-product__pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}
</style>